<template>
  <div class="cpagination">
    <!-- <div class="current-total">
      显示{{page.total===0?0:(Math.ceil(page.total/page.pageSize)>1?((page.currentPage-1)*page.pageSize+1):(1))}}到{{page.total===0?0:((Math.ceil(page.total/page.pageSize)===page.currentPage)?(page.total):(page.currentPage*page.pageSize))}}条
    </div> -->
    <div style="position:relative;text-align:right">
      <div class="show-slot">
        <slot></slot>
      </div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10,20,50,100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    page:{
      type:Object,
      default:function(){
        return null
      }
    },
  },
  methods: {
    //每页展示数量改变触发
    handleSizeChange(pageSize) {
      this.$emit('handleSizeChange',{pageSize})
    },
    //当前页改变事件
    handleCurrentChange(currentPage) {
      this.$emit('handleCurrentChange',{currentPage})
    }
  },
}
</script>

<style lang='scss'>
  .cpagination{
    width: 100%;
    padding-right: 100px;
    text-align: center;
    .current-total{
      margin-left: 50px;
      height: 32px;
      line-height: 32px;
      font-size: 18px;
    }
    .show-slot{
      position: absolute;
      height: 100%;
      line-height: 32px;
    }
  }
</style>